import { PoppedMenuProps } from "@/types/common";
import React, { useRef } from "react";
import { Menu, MenuOptions, MenuTrigger } from "react-native-popup-menu";
import {
  TouchableHighlight,
  TouchableOpacity,
  View,
  Text,
  Dimensions,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import styles from "./index.style";

const { width } = Dimensions.get("screen");

/**
 * 垂直菜单组件
 * @param children
 * @param menus
 * @param maxHeight
 * @param maxWidth
 * @param onPress
 * @param onLongPress
 * @constructor
 */
const VerticalMenuWrapper = ({
  children,
  menus = [
    { label: "转发", icon: "share-outline" },
    { label: "删除", icon: "trash-outline" },
    { label: "多选", icon: "checkmark-outline" },
    { label: "引用", icon: "cut-outline" },
    { label: "保存", icon: "download-outline" },
  ],
  onPress,
  onLongPress,
}: {
  children: React.ReactNode;
  menus?: PoppedMenuProps[];
  onPress?: () => void;
  onLongPress?: () => void;
}) => {
  const menuRef = useRef(null);
  const [anchorPosition, setAnchorPosition] = React.useState<{
    x: number;
    y: number;
  }>({ x: 0, y: 0 });

  const handleSelect = (label: PoppedMenuProps) => {
    label.onClick && label.onClick();
    menuRef.current?.close();
  };

  return (
    <Menu ref={menuRef}>
      <MenuTrigger>
        <TouchableHighlight
          onPress={() => {
            if (onPress) {
              onPress();
            }
          }}
          onLongPress={() => {
            menuRef.current?.open();
            if (onLongPress) {
              onLongPress();
            }
          }}
          onPressIn={(event) => {
            const { pageX } = event.nativeEvent;
            setAnchorPosition({ x: Math.min(pageX, width), y: 0 });
          }}
        >
          {children}
        </TouchableHighlight>
      </MenuTrigger>
      <MenuOptions
        customStyles={{
          optionsContainer: {
            borderRadius: 8,
            shadowOffset: { width: 0, height: 2 },
            shadowOpacity: 0.25,
            shadowRadius: 4,
            width: 100,
          },
        }}
      >
        <View
          style={{
            justifyContent: "center",
            alignItems: "flex-start",
            position: "absolute",
            top: anchorPosition.y,
            left: anchorPosition.x,
            boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.25)",
          }}
        >
          {menus.map((menu, index) => (
            <TouchableOpacity
              key={index}
              onPress={() => handleSelect(menu)}
              style={{
                paddingHorizontal: 4,
                paddingVertical: 6,
                flexDirection: "row",
              }}
            >
              {/*@ts-ignore*/}
              <Ionicons
                style={styles.icon}
                // @ts-ignore
                name={menu.icon}
                size={20}
                color="gray"
              />
              <Text style={{ fontSize: 14 }}>{menu.label}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </MenuOptions>
    </Menu>
  );
};

export default VerticalMenuWrapper;
